<template>
  <div id="body">
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单确认"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="content">
      <!-- 地址选择 -->
      <van-cell size="large" icon="location-o" @click="show = true">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">服务地址</span>
          <div>
            {{
              "姓名:" +
              addressList[index].name +
              "电话:" +
              addressList[index].tel
            }}
          </div>
          <div>
            {{ "地址:" + addressList[index].address }}
          </div>
        </template>
      </van-cell>
      <!-- 地址下拉选择框 -->
      <van-action-sheet class="address" v-model="show" title="标题">
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          add-button-text="确定"
          @select="selectIndex"
          @add="addIndex"
        />
      </van-action-sheet>
      <!-- 订单详情 -->
      <van-cell size="large" icon="orders-o">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">订单详情</span>
          <div v-for="(item, index) in order" :key="index">
            {{ item.productName }}￥{{ item.price }} x{{ item.number }}
          </div>
          <div>总计:￥{{ money }}</div>
        </template>
      </van-cell>
      <!-- 订单时间选择 -->
      <van-cell size="large" icon="clock-o" @click="showTime = true">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">服务时间</span>
          <div>{{ moment(currentDate1).format("YYYY-MM-DD hh:mm:ss a") }}</div>
        </template>
      </van-cell>
      <!-- 时间下拉选择框 -->
      <van-action-sheet class="time" v-model="showTime" title="标题">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showTime = false"
          @confirm="getTime(currentDate)"
        />
      </van-action-sheet>
      <!-- 确认提交 -->
      <div
        class="submitButton"
        style="width: 300px; margin: 0 auto; margin-top:30px"
      >
        <van-button round type="info" @click="submitInfo" style="width: 300px"
          >确定提交</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { get, post, post_json } from "@/http/axios";
import moment from "moment";
import { Toast } from "vant";
export default {
  data() {
    return {
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      currentDate1: new Date(),
      showTime: false,
      order: this.$route.query.order,
      money: this.$route.query.total,
      index: 0,
      num: 0,
      show: false,
      chosenAddressId: "",
      addressList: [],
      addressArr: [],
      addressId: "",
      transmitOrder: [],
      userId: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapState("shopcart", ["orderLines"]),
  },
  created() {
    this.getUserInfo();
    this.getAddress();
  },
  methods: {
    ...mapMutations("shopcart", ["clearShopcart"]),
    moment,
    // 提交按钮
    async submitInfo() {
      if ((this.addressId = null)) {
        this.addressId == this.addressList[this.index].id;
      }
      this.currentDate = moment(this.currentDate).valueOf();
      this.order.forEach((item) => {
        let objOrder = {};
        objOrder.id = 0;
        objOrder.number = item.number;
        objOrder.orderId = 0;
        objOrder.price = item.price;
        objOrder.productId = item.productId;
        if (objOrder.number != 0) {
          this.transmitOrder.push(objOrder);
        }
      });
      let data = {
        addressId: this.addressList[this.index].id,
        customerId: this.userInfo.id,
        orderLines: this.transmitOrder,
        serviceTime: this.currentDate,
      };
      if (this.money != 0) {
        let res = await post_json("/order/submitOrder", data);
        if (res.data.message == "余额不足!") {
          Toast("余额不足");
        } else {
          this.clearShopcart(this.orderLines);
          this.$router.push({ path: "/manager/order" });
        }
      } else {
        Toast("请选择服务");
      }
    },
    // 获取选择时间
    getTime(time) {
      time = moment(time).format("YYYY-MM-DD hh:mm:ss a");
      this.currentDate1 = time;
      this.currentDate = time;
      console.log(time);
      this.showTime = false;
    },
    addIndex() {
      this.index = this.num;
      this.addressId = this.addressList[this.index].id;
      this.show = false;
    },
    //   获取选择的地址索引
    selectIndex(item, index) {
      this.num = index;
    },
    //   获取地址
    async getAddress() {
      let res1 = await get("/user/info?token=" + localStorage.getItem("token"));
      this.userId = res1.data.data.id;
      let data = {
        page: 1,
        pageSize: 100,
        userId: this.userId,
      };
      let res = await get("/address/pageQuery", data);
      this.addressArr = res.data.data.list;
      this.chosenAddressId = this.addressArr[0].id;
      if (!this.addressArr) {
        return;
      }
      this.addressArr.forEach((item, index) => {
        let addressObj = {};
        (addressObj.id = item.id),
          (addressObj.name = item.username),
          (addressObj.tel = item.telephone),
          (addressObj.address =
            item.province + item.city + item.area + item.address),
          (addressObj.isDefault = item.isDefault);
        this.addressList.push(addressObj);
      });
      return this.addressList;
    },
    ...mapActions("user", ["getUserInfo"]),
    onClickLeft() {
      this.clearShopcart(this.orderLines);
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
#body {
  height: 100vh;
}
.address .van-icon::before {
  display: none;
}
.content > .van-cell {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 2px 1px 3px 2px #76cdf0;
  border-radius: 20px;
}
.van-tag--danger {
  background-color: #ffffff;
}
</style>